<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.movebox{
			width: 840px;
			height: 1100px;
			background-image: url(images/1155.jpg);
			/*声明调用movebox动画
			默认只加载一次
			infinite永久加载*/
			transition: 1s;
			transition: ;
			animation: movebox 0.5s infinite;
			/*改变默认方式，支持坐标
			position位置,relative相对位置;*/
			position: relative;
		}
		/*定义一个动画(关键帧)
		动画一帧一帧图片组成，1s36帧以上，人眼不能识别
		from动画开始位置，to结束位置
		过程css+html会自动产生中间过程*/
		@keyframes movebox{
			from{left:0px;}
			to{right:150px;}
		}
		
	</style>
	<body>
		<h3移动方块动画效果></h3>
		<h5>animation</h5>
		<div class="movebox"></div>
	</body>
</html>
